<template>
  <div>
    <div style="display: flex;gap: 10px">
      <!-- 为 bar 图表添加容器，用于包裹图表和无数据提示 -->
      <div class="card-container">
        <div class="card" id="bar" style="flex: 1;height:400px;"></div>
        <!-- 无数据提示层，v-if 控制显示 -->
        <div v-if="!data.hasBarData" class="no-data-overlay">
          <div class="no-data-icon">📊</div>
          <h3>暂无学院数据</h3>
          <p>当前系统还没有学院注册数据，请添加学院或导入学生信息</p>
        </div>
      </div>
      <div class="card" id="line" style="flex: 1;height:400px;margin-right: 10px;"></div>
    </div>
    <div style="display: flex;gap: 10px;margin-top: 5px">
      <div class="card-container">
        <div class="card" id="pie" style="flex: 1;height:400px;"></div>
      </div>
      <div class="card" id="bar2" style="flex: 1;height:400px;margin-right: 10px;"></div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import * as echarts from 'echarts';
import { ElMessage } from "element-plus";
import alovaInstance from "@/utils/request.js";

const data = reactive({
  hasBarData: false
});

const barOption = {
  title: {
    text: '各学院学生注册人数统计',
  },
  tooltip: {},
  legend: {
    data: ['注册人数', '注册趋势']
  },
  xAxis: {
    data: [],
    axisLabel: {
      showMaxLabel: true,
      interval: 0,
      rotate: 45,
      margin: 5
    }
  },
  yAxis: {},
  series: [
    {
      name: '注册人数',
      type: 'bar',
      data: [],
      itemStyle: {
        color: function (params) {
          let colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
          return colorList[params.dataIndex % colorList.length];
        }
      }
    },
    {
      name: '注册趋势',
      type: 'line',
      data: [],
      yAxisIndex: 0,
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        width: 2,
        color: '#ea7ccc'
      },
      itemStyle: {
        color: '#ea7ccc'
      }
    }
  ]
}

onMounted(() => {
  const myChart = echarts.init(document.getElementById('bar'));

  alovaInstance.Get('/sysAdminData/barDataStuCount').then(res => {
    if (res.code === '200') {
      // 强化 hasData 判断：学院名称非空 + 学生数存在有效数据
      const hasData =
          res.data.collegeNames?.length > 0 && res.data.studentCountList?.some(count => count > 0);
          data.hasBarData = hasData;

      if (hasData) {
        // 额外校验数据长度一致性
        if (res.data.collegeNames.length === res.data.studentCountList.length) {
          barOption.xAxis.data = res.data.collegeNames;
          barOption.series[0].data = res.data.studentCountList;
          barOption.series[1].data = res.data.studentCountList;
          myChart.setOption(barOption);
        } else {
          data.hasBarData = false; // 数据异常时强制显示提示
          ElMessage.warning('数据格式不匹配，暂无有效数据');
        }
      }
    } else {
      ElMessage.error(res.message || '获取数据失败');
    }
  }).catch(error => {
    console.error('请求失败:', error);
    ElMessage.error(error.message);
  });

  window.addEventListener('resize', () => myChart.resize());
})
</script>

<style scoped>
/* 新增卡片容器样式，为提示层提供相对定位环境 */
.card-container {
  position: relative;
  flex: 1;
}

/* 无数据提示层样式 */
.no-data-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(245, 247, 250, 0.9);
  z-index: 10;
}

.no-data-icon {
  font-size: 48px;
  margin-bottom: 16px;
  color: #6c757d;
}

.no-data-overlay h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #495057;
  font-weight: 500;
}

.no-data-overlay p {
  font-size: 13px;
  max-width: 80%;
  text-align: center;
  color: #6c757d;
  line-height: 1.5;
}
</style>